<template>
	<view id="top">
		<text>账户余额：120元</text>
		<text>充值一元=1成长值</text>
	</view>
	<view id="VIP">
		<view id="vIPTop">
			<text>VIP1</text>
			<text style="padding-right:40rpx;">会员权益></text>
		</view>
		<view id="VIPGrowthValue">
			<text>68成长值(充值可以获取成长值)</text>
			<text style="padding-right:40rpx;">VIP2</text>
		</view>
		<view >
			<progress :percent="pgList" activeColor="#ce9a51" backgroundColor="#fff" stroke-width="8" border-radius= "8rpx " style="margin:0 40rpx;" />
		</view>
		<view id="Difference">
			<text>距离VIp2只差32成长值</text>
		</view>
	</view>
	<view >
		<view id="Recharge">充值金额</view>
		<view id="RechargeAmount" >
			<!-- <view>￥100送10元</view>
			<view>￥200送20元</view>
			<view id="GrowthValue">￥300
			<text style="display:block;">送10元，在多送50成长值</text></view>
			<view>￥400送40元</view>
			<view>￥500送50元</view>
			<view>￥600送60元</view>
			<view id="seventy">￥700送70元</view> -->
			<view  
			v-for="(v, i) in as"
			            :key="i" @click='df(i)'
						>
				￥{{v.recharge}}送{{v.give}}元
			</view>
			
		</view>
	</view>
	<view id="RechargeButton">
		<a :href="b">
			<button @click="sd">
				充值
			</button>
		</a>
	</view>
</template>

<script>
	import http from "../../utils/http.js";
	import {reactive, ref} from 'vue';
	let pgList=ref(80);
	export default {
		data() {
			return {
				as:[],
				a:0,
				b:''
				
			};
		},
		methods: {
				getData: function() {
					http({
						url: '/recharge',
						method: 'get',
					}).then((res) => {
						if (res.code== 0) {
							this.as=res.data;
						}
					})
				},
				df:function(d){
					
					if(d==0){
						this.a=this.as[0].recharge+this.as[0].give;
						this.b="http://47.109.85.44:8080/pay/alipay/webPay?name=充值金额&price="+this.a+"&comboId=1&userId=9527"
					}else if(d==1){
						this.a=this.as[1].recharge+this.as[1].give;																	
						this.b="http://47.109.85.44:8080/pay/alipay/webPay?name=充值金额&price="+this.a+"&comboId=1&userId=9527"
					}else if(d==2){
						this.a=this.as[2].recharge+this.as[2].give;
						this.b="http://47.109.85.44:8080/pay/alipay/webPay?name=充值金额&price="+this.a+"&comboId=1&userId=9527"
						
					}else if(d==3){
						this.a=this.as[3].recharge+this.as[3].give;
						this.b="http://47.109.85.44:8080/pay/alipay/webPay?name=充值金额&price="+this.a+"&comboId=1&userId=9527"
					}
				}
			},
			 mounted:function(){
			    this.getData()
				
			  }
		}
	</script>

<style lang="less" scoped>
		
	.active{
		color:red;
	}
html{
		background:#ffffff
}
#top{
	display:flex;
	justify-content: space-around;
	align-items: center;
	margin:40rpx auto;
	width:680rpx;
	height:100rpx;
	background:#f2f2f2;
	border-radius: 12rpx;
	box-shadow: 0 0 5px #aaa;
}
#VIP{
	width:680rpx;
	height:300rpx;
	margin:15rpx  auto;
	background:#343434;
	border-radius: 12rpx;
	color:#fefefe;
	box-shadow: 0 0 5px #aaa;
}
#vIPTop{
	display:flex;
	width:720rpx;
	height:100rpx;
	justify-content: space-between;
	align-items: center;
}
	
#vIPTop text:nth-child(1),#VIPGrowthValue text:nth-child(1){
	margin-left:40rpx;
}
#vIPTop text:nth-child(2){
	margin-right:40rpx;
	color:#d3a35c;
}
	
#VIP #VIPGrowthValue{
	display:flex;
	width:720rpx;
	justify-content: space-between;
	align-items: center;
	margin:10rpx 0 30rpx 0;
}
#VIPGrowthValue text:nth-child(2){
	margin-right:40rpx;
}
	
#VIP #ProgressBar{
	margin:30rpx 0; 
}	
#VIP #Difference {
	margin-left:40rpx;
	margin-top:20rpx;
}
	

#Recharge{
	font-size:35rpx;
	font-weight: 500;
	color:#333333;
	margin:30rpx 0rpx 20rpx 50rpx;
}
		
	#RechargeAmount{
		margin:0 auto;
		width:720rpx;
		height:180rpx;
		display:flex;
		flex-wrap: wrap;
		
	}

#RechargeAmount view{
	margin: 10rpx;
	width:130rpx;
	height:100rpx;
	padding:10rpx;
	text-align: center;
	border:1rpx solid #f2f2f2;
	box-shadow: 0 0 5px #aaa;
}
#RechargeAmount #GrowthValue{
		width:380rpx;
	}
#RechargeAmount #seventy{
		margin-left:120rpx;
	}
	
#RechargeButton{
	width:720rpx;
	margin:0 auto;
}
	
#RechargeButton button{
	margin-top:15rpx;
	background:#c6964f;
}
</style>
